import path from 'path';
import webpack from 'webpack';
import fs from 'fs';
import { fileURLToPath } from 'url';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import HTMLWebpackPlugin from 'html-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import CssMinimizerWebpackPlugin from 'css-minimizer-webpack-plugin';
import sass from 'sass';
import PugPlugin from 'pug-plugin';
import PostcssPresetEnv from 'postcss-preset-env';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const PATHS = {
	src: path.resolve(__dirname, './src'),
	dist: path.resolve(__dirname, './dist'),
	assets: 'assets/'
  }

const mode = process.env.NODE_ENV || 'development';
const devMode = mode === 'development';
const target = devMode ? 'web' : 'browserslist';
const devtool = devMode ? 'source-map' : undefined;

  
const PAGES_DIR = path.resolve(PATHS.src, './pug/pages/')
const PAGES = fs.readdirSync(PAGES_DIR).filter(fileName => fileName.endsWith('.pug'))

const plugins = () => {
	return [
		new webpack.ProgressPlugin(),
		new CleanWebpackPlugin(),
		new MiniCssExtractPlugin({
			filename: '[name].[contenthash].css',
			linkType: 'text/css',
		}),
		new CopyWebpackPlugin({
			patterns: [
				{ from: `${PATHS.src}/images`, to: `images` },
				// { from: `${PATHS.src}/fonts`, to: `${PATHS.assets}fonts` },
				{ from: `${PATHS.src}/files`, to: 'files' },
			  ]
		}),
		...PAGES.map(page => new HTMLWebpackPlugin({
			template: `${PAGES_DIR}/${page}`,
			filename: `./${page.replace(/\.pug/,'.html')}`
		  }))
	];
}

const scssLoaders = () => {
	return [
		devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
		{
			loader: 'css-loader',
		}, {
			loader: 'postcss-loader',
			options: {
				postcssOptions: {
					plugins: [PostcssPresetEnv]
				}
			},
		}, {
			loader: 'sass-loader',
			options: {
				sourceMap: true,
			},
		},
	]
}

const config = {
	mode,
	target,
	devtool,
	entry: {
		indexjs: path.resolve(__dirname, './src/index.js'),
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
		clean: true,
		filename: '[name].[contenthash].js',
		assetModuleFilename: 'assets/[name][ext]',
	  },
	resolve: {
		alias: {
			// use alias to avoid relative paths like `./../../images/`
			Images: path.join(__dirname, './src/images/'),
			Fonts: path.join(__dirname, './src/fonts/')
		}
	},
	plugins: plugins(),
	devServer: {
        open: true,
		hot: true,
		// static: {
		// 	directory: path.join(__dirname, 'src'),
		// },
        port: 8080,
    },
	module: {
		noParse: [
			/[\/\\]node_modules[\/\\]jquery[\/\\]dist[\/\\]jquery.min\.js$/,
		],
		rules: [
			{
				test: /\.pug$/,
				loader: PugPlugin.loader,
			},
			{
				test: /\.((c|sa|sc)ss)$/i,
				use: scssLoaders(),
			},
			{
				test: /\.woff2?$/i,
				type: 'asset/resource',
				generator: {
				  filename: 'fonts/[name][ext]',
				},
			},
			// {
			// 	test: /\.(png|jpg|gif|svg|ico)$/i,
			// 	type: 'asset/resource',
			// 	generator: {
			// 	  // output filename of images
			// 	  filename: 'img/[name][ext]',
			// 	},
			// },
			
			// {
			// 	test: /\.(png|jpg|gif|svg)$/i,
			// 	loader: 'file-loader',
			// 	type: 'asset/resource',
			// 	options: {
			// 	  name: '[name].[ext]',
			// 	  outputPath: 'images'
			// 	}
			// },
		],
	},
};

export default config;